<template>
  <div>
    <div class="outmain ba_f">
      <el-form :inline="true" :model="formInline" class="demo-form-inline mar_t20">
        <el-form-item label="选择店铺：">
          <el-select v-model="formInline.region" placeholder="请选择选择店铺" @change="storeChange">
            <el-option v-for="item in options" :key="item.id" :label="item.name+'(ID:'+item.id+')'" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <div class="ba_f8 pad_20">
        <div class="lh25 mar_t10 msgtext fon_12">
          温馨提示：以下情况均在用户微信支付情况下生效，余额支付的订单金额统计到账户余额中，需要门店手动申请提现；
          <br />1、如门店开启了子商户号功能，微信支付的订单金额直接入账到子商户账户中，不统计到账户余额中并且平台无法进行抽佣；
          <br />2、如门店开启了子商户+分账功能，微信支付的订单金额扣除平台佣金后入账到子商户账户中，平台佣金比例以微信服务商设置的最高比例为准，注意抽佣比例最高不能超过总金额的30%。
          <br />3、如订单在某些情况下无法完成自动分账或订单冻结，需要手动点击完结分账后，此订单分账金额才能入账到子商户账户中。
        </div>
      </div>
    </div>
    <div class="flex-bet mar_t20">
      <div class="bflex-7 ba_f pad_l_20 pad_20" style="height: 260px;">
        <div class="shuju_title mar_b20">
          <div class="shuju_title_text">
            <span>账户余额</span>
          </div>
        </div>
        <div class="pad_l_20">
          <div class="color_6">可提现金额（元）</div>
          <div class="fon_26 font_w700 lhh26 mar_t10">{{storeBillData.money}}</div>
        </div>
        <div class="mar_t40">
          <el-button size="medium" type="primary" @click="dialogFormVisible=true">提现</el-button>
          <el-button size="medium" @click="zhmx">账户明细</el-button>
          <el-button size="medium" @click="dialogVisible = true">提现方式</el-button>
        </div>
      </div>
      <div class="bflex-3 mar_l20 ba_f pad_20" style="height: 260px;">
        <div class="shuju_title mar_b20">
          <div class="shuju_title_text">
            <span>账户信息</span>
          </div>
        </div>
        <div class="pad_l_20 lh28">
          <div class="color_6 flex">
            <div>商户名称：</div>
            <div>{{storeName}}</div>
          </div>
          <div class="color_6 flex">
            <div>提现方式：</div>
            <div>{{accountInfo.type || '无'}}</div>
          </div>
          <div class="color_6 flex">
            <div>提现账号：</div>
            <div>{{accountInfo.account || '无'}}</div>
          </div>
          <div class="color_6 flex">
            <div>结算方式：</div>
            <div>单店结算</div>
          </div>
          <div class="color_6 flex">
            <div>结算费率：</div>
            <div>{{accountInfo.rate}}</div>
          </div>
<!--          <div class="color_6 flex">-->
<!--            <div>结算周期：</div>-->
<!--            <div>{{accountInfo.entryDay}}天</div>-->
<!--          </div>-->
        </div>
      </div>
    </div>
<!--    <div class="ba_f pad_20 mar_t20">-->
<!--      <div class="shuju_title mar_b20">-->
<!--        <div class="shuju_title_text">-->
<!--          <span>账户概况</span>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="main-icon flex t_l mar_t20">-->
<!--        <div class="flex-1 t_l pad_20 borderBG mar_r20">-->
<!--          <div class="flex-bet flex-y-top">-->
<!--            <div>-->
<!--              <p class="color_9 fon_14">门店总金额(元)</p>-->
<!--              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{storeBillData.allMoney}}</p>-->
<!--            </div>-->
<!--&lt;!&ndash;            <div class="toolTip">&ndash;&gt;-->
<!--&lt;!&ndash;              <el-tooltip effect="dark" placement="top">&ndash;&gt;-->
<!--&lt;!&ndash;                <div slot="content">门店总金额=可提现金额+待结算金额</div>&ndash;&gt;-->
<!--&lt;!&ndash;                <button type="button" class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">&ndash;&gt;-->
<!--&lt;!&ndash;                  <span>&ndash;&gt;-->
<!--&lt;!&ndash;                    <i class="el-icon-question"></i>&ndash;&gt;-->
<!--&lt;!&ndash;                  </span>&ndash;&gt;-->
<!--&lt;!&ndash;                </button>&ndash;&gt;-->
<!--&lt;!&ndash;              </el-tooltip>&ndash;&gt;-->
<!--&lt;!&ndash;            </div>&ndash;&gt;-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="flex-1 t_l pad_20 borderBG mar_r20">-->
<!--          <div class="flex-bet flex-y-top">-->
<!--            <div>-->
<!--              <p class="color_9 fon_14">待结算金额(元)</p>-->
<!--              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{storeBillData.waitMoney}}</p>-->
<!--            </div>-->
<!--&lt;!&ndash;            <div class="toolTip">&ndash;&gt;-->
<!--&lt;!&ndash;              <el-tooltip effect="dark" placement="top">&ndash;&gt;-->
<!--&lt;!&ndash;                <div slot="content">待结算金额是指订单未完成或订单账期未结算</div>&ndash;&gt;-->
<!--&lt;!&ndash;                <button type="button" class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">&ndash;&gt;-->
<!--&lt;!&ndash;                  <span>&ndash;&gt;-->
<!--&lt;!&ndash;                    <i class="el-icon-question"></i>&ndash;&gt;-->
<!--&lt;!&ndash;                  </span>&ndash;&gt;-->
<!--&lt;!&ndash;                </button>&ndash;&gt;-->
<!--&lt;!&ndash;              </el-tooltip>&ndash;&gt;-->
<!--&lt;!&ndash;            </div>&ndash;&gt;-->
<!--          </div>-->
<!--        </div>-->
<!--        &lt;!&ndash;                <div class="flex-1 t_l pad_20 bortColor">&ndash;&gt;-->
<!--        &lt;!&ndash;                    <div class="flex-bet flex-y-top">&ndash;&gt;-->
<!--        &lt;!&ndash;                        <div>&ndash;&gt;-->
<!--        &lt;!&ndash;                            <p class="title6 fon_14">保证金额(元)</p>&ndash;&gt;-->
<!--        &lt;!&ndash;                            <p class="fon_30 title35 lh16 pad_tb_20">{{storeBillData.money}}</p>&ndash;&gt;-->
<!--        &lt;!&ndash;                        </div>&ndash;&gt;-->
<!--        &lt;!&ndash;                        <div class="toolTip">&ndash;&gt;-->
<!--        &lt;!&ndash;                            <el-tooltip effect="dark" placement="top">&ndash;&gt;-->
<!--        &lt;!&ndash;                                <div slot="content">保证金额(元)</div>&ndash;&gt;-->
<!--        &lt;!&ndash;                                <button type="button"&ndash;&gt;-->
<!--        &lt;!&ndash;                                        class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">&ndash;&gt;-->
<!--        &lt;!&ndash;                                    <span><i class="el-icon-question"></i></span>&ndash;&gt;-->
<!--        &lt;!&ndash;                                </button>&ndash;&gt;-->
<!--        &lt;!&ndash;                            </el-tooltip>&ndash;&gt;-->
<!--        &lt;!&ndash;                        </div>&ndash;&gt;-->
<!--        &lt;!&ndash;                    </div>&ndash;&gt;-->
<!--        &lt;!&ndash;                </div>&ndash;&gt;-->
<!--        <div class="flex-1 t_l pad_20 borderBG mar_r20">-->
<!--          <div class="flex-bet flex-y-top">-->
<!--            <div>-->
<!--              <p class="color_9 fon_14">已提现余额(元)</p>-->
<!--              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{storeBillData.financeMoney}}</p>-->
<!--            </div>-->
<!--&lt;!&ndash;            <div class="toolTip">&ndash;&gt;-->
<!--&lt;!&ndash;              <el-tooltip effect="dark" placement="top">&ndash;&gt;-->
<!--&lt;!&ndash;                <div slot="content">已提现余额指门店已提现的金额</div>&ndash;&gt;-->
<!--&lt;!&ndash;                <button type="button" class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">&ndash;&gt;-->
<!--&lt;!&ndash;                  <span>&ndash;&gt;-->
<!--&lt;!&ndash;                    <i class="el-icon-question"></i>&ndash;&gt;-->
<!--&lt;!&ndash;                  </span>&ndash;&gt;-->
<!--&lt;!&ndash;                </button>&ndash;&gt;-->
<!--&lt;!&ndash;              </el-tooltip>&ndash;&gt;-->
<!--&lt;!&ndash;            </div>&ndash;&gt;-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="flex-1 t_l pad_20 borderBG">-->
<!--          <div class="flex-bet flex-y-top">-->
<!--            <div>-->
<!--              <p class="color_9 fon_14">累计收入(元)</p>-->
<!--              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{storeBillData.cumulative}}</p>-->
<!--            </div>-->
<!--&lt;!&ndash;            <div class="toolTip">&ndash;&gt;-->
<!--&lt;!&ndash;              <el-tooltip effect="dark" placement="top">&ndash;&gt;-->
<!--&lt;!&ndash;                <div slot="content">累计收入=门店总金额+已提现金额</div>&ndash;&gt;-->
<!--&lt;!&ndash;                <button type="button" class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">&ndash;&gt;-->
<!--&lt;!&ndash;                  <span>&ndash;&gt;-->
<!--&lt;!&ndash;                    <i class="el-icon-question"></i>&ndash;&gt;-->
<!--&lt;!&ndash;                  </span>&ndash;&gt;-->
<!--&lt;!&ndash;                </button>&ndash;&gt;-->
<!--&lt;!&ndash;              </el-tooltip>&ndash;&gt;-->
<!--&lt;!&ndash;            </div>&ndash;&gt;-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

    <!--        <div class="outmain ba_f mar_t20">-->
    <!--            <div class="shuju_title mar_b20">-->
    <!--                <div class="shuju_title_text">-->
    <!--                    <span>账户流水</span>-->
    <!--                </div>-->
    <!--            </div>-->
    <!--            <el-table-->
    <!--                    :data="tableData2"-->
    <!--                    stripe-->
    <!--                    style="width: 100%">-->
    <!--                <el-table-column-->
    <!--                        prop="rq"-->
    <!--                        label="时间"-->
    <!--                >-->
    <!--                </el-table-column>-->
    <!--                <el-table-column-->
    <!--                        prop="lx"-->
    <!--                        label="类型"-->
    <!--                >-->
    <!--                </el-table-column>-->
    <!--                <el-table-column-->
    <!--                        prop="ms"-->
    <!--                        label="描述"-->
    <!--                >-->
    <!--                </el-table-column>-->
    <!--                <el-table-column-->
    <!--                        prop="zc"-->
    <!--                        label="金额"-->
    <!--                >-->
    <!--                </el-table-column>-->
    <!--                <el-table-column-->
    <!--                        prop="zt"-->
    <!--                        label="状态"-->
    <!--                >-->
    <!--                    <template slot-scope="scope">-->
    <!--                        <div class="flex color-green">-->
    <!--                            已入账-->
    <!--                        </div>-->
    <!--                    </template>-->
    <!--                </el-table-column>-->
    <!--                <el-table-column-->
    <!--                        prop="ye"-->
    <!--                        label="当前余额"-->
    <!--                >-->
    <!--                </el-table-column>-->
    <!--                <el-table-column-->
    <!--                        prop="zcy"-->
    <!--                        label="备注"-->
    <!--                >-->
    <!--                </el-table-column>-->
    <!--                <el-table-column-->
    <!--                        prop="sr"-->
    <!--                        label="操作"-->
    <!--                >-->
    <!--                    <template slot-scope="scope">-->
    <!--                        <div class="flex">-->
    <!--                            <el-button type="text" @click="handleDetail(scope.row)">查看详情</el-button>-->
    <!--                        </div>-->
    <!--                    </template>-->
    <!--                </el-table-column>-->
    <!--            </el-table>-->
    <!--        </div>-->
    <div class="outmain ba_f mar_t20">
      <div class="shuju_title mar_b20">
        <div class="shuju_title_text">
          <span>提现概况</span>
        </div>
      </div>
      <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column
                  prop="zh"
                  label="申请时间/订单号"
          >
            <template slot-scope="scope">
              <div>{{scope.row.createdAt}}</div>
              <div>{{ scope.row.outTradeNo }}</div>
            </template>
          </el-table-column>
        <el-table-column prop="type" label="提现方式">
          <template slot-scope="scope">
            <div v-if="scope.row.type=='1'"><el-tag type="success" size="mini">微信</el-tag></div>
            <div v-if="scope.row.type=='2'"><el-tag size="mini">支付宝</el-tag></div>
            <div v-if="scope.row.type=='3'"><el-tag type="warning" size="mini">银行卡</el-tag></div>
          </template>
        </el-table-column>
        <el-table-column prop="account" label="账户信息">
          <template slot-scope="scope">
            <div v-if="scope.row.type=='1'">{{scope.row.account.userId}}(微信昵称:{{scope.row.account.userName}})</div>
            <div v-if="scope.row.type=='2'">{{scope.row.account.aliAccount}}</div>
            <div v-if="scope.row.type=='3'">{{scope.row.account.bankAccount}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="money" label="提现金额">
          <template slot-scope="scope">
            <div>
              {{scope.row.money}}
              <span style="color: #df0029" v-if="scope.row.state=='3'">(已退回到账户余额)</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="手续费">
          <template slot-scope="scope">
            <div class="color-red wei">-￥{{scope.row.serviceMoney}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="money" label="到账金额">
          <template slot-scope="scope">
            <div class="color-green wei">+￥{{scope.row.actualMoney}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="state" label="提现状态">
          <template slot-scope="scope">
            <div style="color:#155BD4" v-if="scope.row.state=='1'"><el-tag size="mini">待审核</el-tag></div>
            <div style="color: #489620" v-if="scope.row.state=='2'"><el-tag type="success" size="mini">已通过</el-tag></div>
            <div style="color: #df0029" v-if="scope.row.state=='3'"><el-tag type="danger" size="mini">已拒绝</el-tag></div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :total="page.total" :page-size="page.pagesize" :current-page.sync="page.currentPage" @current-change="handleCurrentChange"></el-pagination>
      <el-dialog title="提示" :visible.sync="dialogVisible" width="35%">
        <!--                <div>-->
        <!--                    <el-form ref="form5" :model="form5" label-width="180px">-->
        <!--                        <el-form-item label="提现方式">-->
        <!--                            <el-radio-group v-model="form5.type">-->
        <!--                                <el-radio label="1" v-if="cashType1" disabled>微信</el-radio>-->
        <!--                                <el-radio label="2" v-if="cashType2" disabled>支付宝</el-radio>-->
        <!--                                <el-radio label="3" v-if="cashType3" disabled>银行卡</el-radio>-->
        <!--                            </el-radio-group>-->
        <!--                        </el-form-item>-->
        <!--                        <el-form-item label="手机号">-->
        <!--                            <el-input v-model="form5.wxTel" v-if="form5.type=='1'" placeholder="请输入手机号" disabled></el-input>-->
        <!--                            <el-input v-model="form5.aliTel" v-if="form5.type=='2'" placeholder="请输入手机号" disabled></el-input>-->
        <!--                            <el-input v-model="form5.bankTel" v-if="form5.type=='3'" placeholder="请输入手机号" disabled></el-input>-->
        <!--                        </el-form-item>-->
        <!--                        <div v-if="form5.type=='1'">-->
        <!--                            <el-form-item label="用户ID">-->
        <!--                                <el-input v-model="form5.userId" disabled placeholder="请输入用户ID"></el-input>-->

        <!--                                <el-button class="mar_l20" @click="onSearch" disabled>搜索</el-button>-->
        <!--                                <div class="yb_margin lh16">*为了打款成功，请真实的填写您的用户ID号 当前绑定微信昵称：{{wName}}</div>-->
        <!--                            </el-form-item>-->
        <!--                            <el-form-item label="微信收款码图片">-->
        <!--                                <div class="uploadSource bor_de rel flex" v-if="form5.wxImg">-->
        <!--                                    &lt;!&ndash;                                    <label class="statusLabel curs" @mouseenter="enter(1)" @mouseleave="leave(1)">&ndash;&gt;-->
        <!--                                    &lt;!&ndash;                                        <i class="el-icon-check" ref="imgicon1"></i>&ndash;&gt;-->
        <!--                                    &lt;!&ndash;                                        <i class="el-icon-close" @click="deleteMultiImage(form5.wxImg,1)"></i>&ndash;&gt;-->
        <!--                                    &lt;!&ndash;                                    </label>&ndash;&gt;-->
        <!--                                    <img :src="form5.wxImg"  class="wid" />-->
        <!--                                </div>-->
        <!--                                <div class="uploadSource flex-center curs" v-else >-->
        <!--                                    <i class="el-icon-plus fon_40 color_d9"></i>-->
        <!--                                </div>-->
        <!--                                &lt;!&ndash;                                <div class="yb_margin lh16">请上传接单助手服务号二维码图片</div>&ndash;&gt;-->

        <!--                                <attachment-img ref="img1" type="img" @attachment='imgadd1'></attachment-img>-->
        <!--                            </el-form-item>-->
        <!--                        </div>-->
        <!--                        <div v-if="form5.type=='2'">-->
        <!--                            <el-form-item label="支付宝账号">-->
        <!--                                <el-input v-model="form5.aliAccount" disabled placeholder="请输入支付宝账号"></el-input>-->
        <!--                            </el-form-item>-->
        <!--                            <el-form-item label="支付宝真实姓名">-->
        <!--                                <el-input v-model="form5.aliUserName" disabled placeholder="请输入真实姓名"></el-input>-->
        <!--                            </el-form-item>-->
        <!--                            <el-form-item label="支付宝收款码图片">-->
        <!--                                <div class="uploadSource bor_de rel flex" v-if="form5.aliImg">-->
        <!--                                    &lt;!&ndash;                                 <span @click="deleteMultiImage(form5.aliImg,2)" class="curs ab closeicon"&ndash;&gt;-->
        <!--                                    &lt;!&ndash;                                       title="删除这张图片">&ndash;&gt;-->
        <!--                                    &lt;!&ndash;                                      <i class="el-icon-circle-close fon_14 color_3"></i>&ndash;&gt;-->
        <!--                                    &lt;!&ndash;                                </span>&ndash;&gt;-->
        <!--                                    <img :src="form5.aliImg"  class="wid"/>-->
        <!--                                </div>-->
        <!--                                <div class="uploadSource flex-center curs" v-else >-->
        <!--                                    <i class="el-icon-plus fon_40 color_d9"></i>-->
        <!--                                </div>-->
        <!--                                &lt;!&ndash;                                <div class="yb_margin lh16">请上传接单助手服务号二维码图片</div>&ndash;&gt;-->

        <!--                                <attachment-img ref="img2" type="img" @attachment='imgadd2'></attachment-img>-->
        <!--                            </el-form-item>-->
        <!--                        </div>-->
        <!--                        <div v-if="form5.type=='3'">-->
        <!--                            <el-form-item label="所属银行">-->
        <!--                                <el-input v-model="form5.bankName" disabled placeholder="请输入所属银行"></el-input>-->
        <!--                            </el-form-item>-->
        <!--                            <el-form-item label="所属支行">-->
        <!--                                <el-input v-model="form5.subBank" placeholder="请输入所属支行" disabled></el-input>-->
        <!--                            </el-form-item>-->
        <!--                            <el-form-item label="银行卡账号">-->
        <!--                                <el-input v-model="form5.bankAccount" placeholder="请输入所属支行"></el-input>-->
        <!--                            </el-form-item>-->
        <!--                            <el-form-item label="真实姓名">-->
        <!--                                <el-input v-model="form5.bankUserName" placeholder="请输入真实姓名" disabled></el-input>-->
        <!--                            </el-form-item>-->
        <!--                        </div>-->
        <!--                    </el-form>-->
        <!--                    <div class="yb_margin lh16 " style="padding-left: 70px">注意：提现方式一旦确定，将不能修改，如需修改，请联系总管理员咨询</div>-->
        <!--                </div>-->
        <div>
          <el-form ref="form5" :model="form5" label-width="180px">
            <el-form-item label="提现方式">
              <el-radio-group v-model="form5.type">
                <el-radio label="1" v-if="channel.indexOf('1') >= 0">微信</el-radio>
                <el-radio label="2" v-if="channel.indexOf('2') >= 0">支付宝</el-radio>
                <el-radio label="3" v-if="channel.indexOf('3') >= 0">银行卡</el-radio>
                <template v-if="channel.indexOf('1') < 0 && channel.indexOf('2') < 0 && channel.indexOf('3') < 0">
                  <el-radio label="1">微信</el-radio>
                  <el-radio label="2">支付宝</el-radio>
                  <el-radio label="3">银行卡</el-radio>
                </template>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="form5.wxTel" v-if="form5.type=='1'" placeholder="请输入手机号"></el-input>
              <el-input v-model="form5.aliTel" v-if="form5.type=='2'" placeholder="请输入手机号"></el-input>
              <el-input v-model="form5.bankTel" v-if="form5.type=='3'" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <div v-if="form5.type=='1'">
              <el-form-item label="用户ID">
                <el-input v-model="form5.userId" placeholder="请输入用户ID"></el-input>

                <el-button class="mar_l20" @click="onSearch">搜索</el-button>
                <div class="yb_margin lh16">
                  *为了打款成功，请真实的填写您的用户ID号 当前绑定微信昵称：
                  <span class="color_rb">{{wName}}</span>
                </div>
              </el-form-item>
              <el-form-item label="微信收款码图片">
                <div class="uploadSource bor_de rel flex" v-if="form5.wxImg">
                  <label class="statusLabel curs" @mouseenter="enter(1)" @mouseleave="leave(1)">
                    <i class="el-icon-check" ref="imgicon1"></i>
                    <i class="el-icon-close" @click="deleteMultiImage(form5.wxImg,1)"></i>
                  </label>
                  <img :src="form5.wxImg" @click="test(1)" class="wid" />
                </div>
                <div class="uploadSource flex-center curs" v-else @click="test(1)">
                  <i class="el-icon-plus fon_40 color_d9"></i>
                </div>
                <!--                                <div class="yb_margin lh16">请上传接单助手服务号二维码图片</div>-->

                <attachment-img ref="img1" type="img" @attachment="imgadd1"></attachment-img>
              </el-form-item>
            </div>
            <div v-if="form5.type=='2'">
              <el-form-item label="支付宝账号">
                <el-input v-model="form5.aliAccount" placeholder="请输入支付宝账号"></el-input>
              </el-form-item>
              <el-form-item label="支付宝真实姓名">
                <el-input v-model="form5.aliUserName" placeholder="请输入真实姓名"></el-input>
              </el-form-item>
              <el-form-item label="支付宝收款码图片">
                <div class="uploadSource bor_de rel flex" v-if="form5.aliImg">
                  <span @click="deleteMultiImage(form5.aliImg,2)" class="curs ab closeicon" title="删除这张图片">
                    <i class="el-icon-circle-close fon_14 color_3"></i>
                  </span>
                  <img :src="form5.aliImg" @click="test(2)" class="wid" />
                </div>
                <div class="uploadSource flex-center curs" v-else @click="test(2)">
                  <i class="el-icon-plus fon_40 color_d9"></i>
                </div>
                <!--                                <div class="yb_margin lh16">请上传接单助手服务号二维码图片</div>-->
                <attachment-img ref="img2" type="img" @attachment="imgadd2"></attachment-img>
              </el-form-item>
            </div>
            <div v-if="form5.type=='3'">
              <el-form-item label="所属银行">
                <el-input v-model="form5.bankName" placeholder="请输入所属银行"></el-input>
              </el-form-item>
              <el-form-item label="所属支行">
                <el-input v-model="form5.subBank" placeholder="请输入所属支行"></el-input>
              </el-form-item>
              <el-form-item label="银行卡账号">
                <el-input v-model="form5.bankAccount" placeholder="请输入所属支行"></el-input>
              </el-form-item>
              <el-form-item label="真实姓名">
                <el-input v-model="form5.bankUserName" placeholder="请输入真实姓名"></el-input>
              </el-form-item>
            </div>
          </el-form>
          <!--                    <div class="yb_margin lh16 " style="padding-left: 70px">注意：提现方式一旦确定，将不能修改，如需修改，请联系总管理员咨询</div>-->
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit3">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog title="余额提现" :visible.sync="dialogFormVisible" width="35%">
        <el-form ref="form" :model="form" label-width="120px">
          <el-form-item label="可提现余额">
            <div class="subjectcolor2 fon_24">{{storeBillData.money}}</div>
          </el-form-item>
<!--          <el-form-item label="提现账户">-->
<!--            <el-radio label="1" v-if="channel.indexOf('1') >= 0">微信</el-radio>-->
<!--            <el-radio label="2" v-if="channel.indexOf('2') >= 0">支付宝</el-radio>-->
<!--            <el-radio label="3" v-if="channel.indexOf('3') >= 0">银行卡</el-radio>-->
<!--            <template v-if="channel.indexOf('1') < 0 && channel.indexOf('2') < 0 && channel.indexOf('3') < 0">-->
<!--              <el-radio label="1">微信</el-radio>-->
<!--              <el-radio label="2">支付宝</el-radio>-->
<!--              <el-radio label="3">银行卡</el-radio>-->
<!--            </template>-->
<!--          </el-form-item>-->
          <el-form-item label="提现余额">
            <el-input v-model.trim="form.money" @input="jisuan" autocomplete="off" placeholder="请输入可提现余额">
              <template slot="append">元</template>
            </el-input>
            <div class="lh25 fon_14 mar_t5 color_9">最低提现金额：<span class="subjectcolor2">{{form5.system.downMoney}}元</span>
              , 服务费收费标准：<span class="subjectcolor2">{{form5.system.rate}}%每笔</span> 最低收取：<span class="subjectcolor2">{{form5.system.rateDownMoney}}元</span>
            </div>
          </el-form-item>
          <el-form-item label="提现账户">
            <el-radio-group v-model="form5.type">
              <el-radio label="1" v-if="form5.type=='1'">微信
                （<span class="mar_l10">用户ID:{{form5.userId}}</span>
                <span class="mar_l20">手机号:{{form5.wxTel}}</span>）
              </el-radio>
              <el-radio label="2" v-if="form5.type=='2'">支付宝
                （<span class="mar_l10">支付宝账号:{{form5.aliAccount}}</span>
                <span class="mar_l20">姓名:{{form5.aliUserName}}</span>
                <span class="mar_l20">手机号:{{form5.aliTel}}</span>）
              </el-radio>
              <el-radio label="3" v-if="form5.type=='3'">银行卡
                （<span class="mar_l10">银行:{{form5.bankName}}</span>
                <span class="mar_l20">银行卡账号:{{form5.bankAccount}}</span>
                <span class="mar_l20">真实姓名:{{form5.bankUserName}}</span>）
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="手续费" v-if="form5.system.rate && form5.system.downMoney && form5.system.rateDownMoney">
            <el-input v-model="sxf" autocomplete="off" disabled>
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="实际到账金额" v-if="form5.system.rate && form5.system.downMoney && form5.system.rateDownMoney">
            <el-input v-model.trim="dzje" autocomplete="off" disabled>
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit2">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import { storeBill, storeWithdrawalList, accountInfo, storeGetwithdrawal, getUserInfo, storePostwithdrawal } from '@/api/statistics';
import attachmentImg from '@/plugins/attachment-img';
export default {
  components: { attachmentImg },
  data() {
    return {
      form: {
        money: ''
      },
      wName: '',
      maxMoney: '',
      day: '',
      type: '',
      formInline: {
        region: ''
      },
      options: [],
      storeName: '',
      storeBillData: {
        money: '',
        financeMoney: '',
        allMoney: '',
        waitMoney: '',
        cumulative: ''
      },
      dialogVisible: false,
      dialogFormVisible: false,
      channel: [],
      cashType1: false,
      cashType2: false,
      cashType3: false,
      form5: {
        type: '1',
        userId: '',
        wxImg: '',
        wxTel: '',
        aliTel: '',
        aliAccount: '',
        aliUserName: '',
        aliImg: '',
        bankTel: '',
        bankName: '',
        subBank: '',
        bankUserName: '',
        bankAccount: '',
        system:{
          downMoney:'',
          rateDownMoney:'',
          rate:'',
        }
      },
      page: {
        total: 0,
        size: 10,
        currentPage: 1
      },
      tableData: [],
      accountInfo: {},
      tableData2: [
        {
          rq: '2020-8-18',
          lx: '收入',
          ms: '8/15日对账单',
          zcy: '2020-08-12账单结算入余额，已成功',
          zc: '20',
          bs: '2',
          ye: '2000',
          zt: '已入账'
        }
      ],
      sxf:'',
      dzje:'',
    };
  },
  created() {
    this.formInline.region = this.market[0].id;
    this.storeName = this.market[0].name + '(' + this.market[0].id + ')';
    this.options = this.market;
    this.storeBill(this.market[0].id);
    this.getWithdrawalList(this.market[0].id);
    this.getAccountInfo();
    this.getWithdrawal();
  },
  computed: {
    ...mapState(['market']),
  },
  methods: {
    enter(i = 0) {
      this.$refs['imgicon' + i].style.display = 'none';
    },
    leave(i = 0) {
      this.$refs['imgicon' + i].style.display = 'inline-block';
    },
    test(i = 0) {
      // console.log(this.$refs, i)
      this.$refs['img' + i].dialogVisible = true;
    },
    imgadd1(url) {
      this.form5.wxImg = url.str;
    },
    imgadd2(url) {
      this.form5.aliImg = url.str;
    },
    deleteMultiImage(item, index, type) {
      //typem没传是单图multigraph多图；index上传图片组件排序
      Array.prototype.remove = function (val) {
        var index = this.indexOf(val);
        if (index > -1) {
          this.splice(index, 1);
        }
      };
      if (type == 'multigraph') {
        switch (index) {
          case 2:
            this.form5.wxImg.remove(item);
            break;
        }
      } else {
        switch (index) {
          case 1:
            this.form5.wxImg = '';
            break;
          case 2:
            this.form5.aliImg = '';
            break;
        }
      }
    },
    onSubmit() {},
    //账户信息
    async getAccountInfo() {
      const { data } = await accountInfo();
      this.accountInfo = data;
    },
    async getWithdrawal() {
      const { data } = await storeGetwithdrawal({ storeId: this.formInline.region });
      Object.assign(this.form5, data);
      this.wName = data.userName;
      this.channel = data.channel?data.channel:[];
      if (!data.type) {
        if (data.channel && data.channel.length) {
          this.form5.type = data.channel.sort()[0];
        } else {
          this.form5.type = '1';
        }
      }
      this.type = data.type;
    },
    async onSearch() {
      const { data } = await getUserInfo({ id: this.form5.userId });
      this.wName = data.userName;
    },
    //提现方式
    async onSubmit3() {
      if (this.formInline.region) {
        this.form5.storeId = this.formInline.region;
      }
      const { msg } = await storePostwithdrawal(this.form5);
      this.$baseMessage(msg, 'success');
      this.dialogVisible = false;
      // this.form5 = Object.assign({}, data);
    },
    storeChange(val) {
      this.options.forEach((item) => {
        if (item.id == val) {
          this.storeName = `${item.name}(ID:${item.id})`;
          this.storeBill(item.id);
          this.getWithdrawalList(item.id);
        }
      });
    },
    zhmx(){
      this.$router.push(`/accountdl?storeId=${this.formInline.region}`);
    },
    jisuan(){
      if(this.form5.system.rate && this.form5.system.downMoney && this.form5.system.rateDownMoney){
        if(+this.form.money > +this.storeBillData.money){
          this.form.money = this.storeBillData.money
        }
        this.sxf = (this.form.money*this.form5.system.rate) / 100
        this.dzje = +this.form.money - +this.sxf
        if(this.sxf && +this.sxf<+this.form5.system.rateDownMoney){
          this.sxf = this.form5.system.rateDownMoney
          this.dzje = +this.form.money - +this.sxf
        }
      }
    },
    loading() {
      this.$message({
        message: '总门店无需提现!',
        type: 'error'
      });
    },
    //提现
    onSubmit2() {
      var that = this;
      if (this.formInline.region) {
        that.form.storeId = this.formInline.region;
      }
      that.$api.post('channel/store-bill/withdrawal', { money: this.form.money, storeId: this.formInline.region }, (res) => {
        if (res.code == 1) {
          that.dialogFormVisible = false;
          that.$message({
            message: res.msg,
            type: 'success',
            duration: 500,
            onClose: () => {
              that.storeBill();
              this.getWithdrawalList();
              this.getAccountInfo();
              this.getWithdrawal();
            }
          });
        } else {
          that.$message.error(res.msg);
        }
      });
    },
    async storeBill(id) {
      const { data } = await storeBill({ storeId: id });
      this.storeBillData.money = data.money ? data.money : 0.0;
      this.storeBillData.financeMoney = data.financeMoney ? data.financeMoney : 0.0;
      this.storeBillData.allMoney = data.allMoney ? data.allMoney : 0.0;
      this.storeBillData.waitMoney = data.waitMoney ? data.waitMoney : 0.0;
      this.storeBillData.cumulative = data.cumulative ? data.cumulative : 0.0;
    },
    //提现列表
    async getWithdrawalList(id) {
      var params = {
        storeId: id,
        page: this.page.currentPage
      };
      const { data, count } = await storeWithdrawalList(params);
      this.tableData = data;
      this.page.total = count;
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.getWithdrawalList();
    }
  }
};
</script>
<style lang="scss" scoped>
.lhh26 {
  line-height: 26px;
  height: 26px;
}
</style>
